<template style="width:50%">
  <el-container style="text-align: center;padding-top: 150px">
    <el-header style="width:1000px;height:350px;margin:0 auto;background-color:whitesmoke">
      <div style="text-align: left;width: 10px;float: left;margin-top: 60px;margin-left: 50px">
        <img :src="book.url" alt="">
      </div>
        <div style="margin-left:0px;text-align: right;margin-top:60px ">
          <div style="text-align: center">
            <span><b>{{book.title}}</b></span>
            <el-divider direction="vertical"></el-divider>
            <span style="font-size: 10px;margin-left: 10px;">作者:{{book.author}}</span>
            <el-divider direction="vertical"></el-divider>
            <span style="font-size: 10px;margin-left: 10px">分类:{{book.classify}}</span>
          </div>
          <div style="margin-top:50px;text-align: center">
            <el-row>
              <el-button type="success" @click="readtest()">试读</el-button>
              <el-button type="danger" :disabled="status=='已购买'" @click="buy()">{{ status }}</el-button>
            </el-row>
          </div>
        </div>
      <div style="margin-top:-55px;padding-left:250px;width:531px;font-size: 13px;position: relative;text-align: left">
       <b>简介:</b>{{book.introduction}}
      </div>
    </el-header>
    <el-container style="margin:0 auto;width:1000px;height:2975px;margin-top: 10px;">
      <el-main style="border:2px;background-color: whitesmoke">
        <div style="text-align: left">
          <b>书圈</b>
          <el-divider direction="vertical"></el-divider>
          <span style="font-size: 10px">{{info}}</span>
          <el-divider></el-divider>
          <el-input
              autosize="true"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea">
          </el-input>
          <el-row style="text-align: right;margin-top: 5px">
            <el-button size="small" type="primary" icon="el-icon-edit" @click="on()">发表评论</el-button>
          </el-row>
          <el-divider></el-divider>
          <b>评论区</b>
          <el-row class="demo-avatar demo-basic" style="margin-top: 40px">
            <el-col :span="12">
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar :size="50" src="https://img1.baidu.com/it/u=592570905,1313515675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar>
                  <span style="padding-left: 15px"><b>小狗</b>
                    <el-divider direction="vertical"></el-divider>
                    <i style="font-size: 5px">2033年10月5日 20:15:16</i></span>
                </div>
              </div>
            </el-col>
            </el-row>
          <el-row>
            <el-col>
             <div style="padding-left: 65px;margin-top: 25px"><span>菜鸡</span></div>
            </el-col>
          </el-row>
        </div>
        <el-divider></el-divider>
      </el-main>
      <el-aside width="300px" style="background-color: whitesmoke">
        <h1>看过的人还看过</h1>
        <div style="text-align: center" v-for=" r in recommend">
          <a href=""><img :src="r.u" alt=""></a>
          <h5 style="margin-top: 10px">作者:{{ r.author }}</h5>
        </div>
        <el-divider></el-divider>
        <h1>同类热销榜</h1>
        <div style="text-align: center">
          <div style="float: left;margin-left: 45px"><span>排 名</span></div>
          <span>书 名</span>
          <div style="float: right;margin-right: 13px"><span>阅读量</span></div>
        </div>
        <el-divider></el-divider>
        <div style=" text-align: center;" v-for=" r in Ranking">
          <a href="">
            <div style="float: left;margin-left: 60px"><span>{{ r.index }}</span></div>
            <span>{{ r.title }}</span>
            <div style="float: right;margin-right: 20px"><span>{{ r.countByRead }}</span></div>
            <el-divider></el-divider>
          </a>
        </div>
      </el-aside>
    </el-container>
  </el-container>
</template>
<script src="./bookstore.js"></script>
<style>
#date {
  text-align: right;
  font-size: 13px;
  margin-top: 10px;
}

a {
  text-decoration: none;
  line-height: 30px;
  text-align: center;
  font: 15px "Microsoft Yahei";
  color: black;
}
</style>

